<template>
  <div id="spaces-index">
    <div class="main-container container-fluid page-holder">
      <div class="page-title-holder">
        <h2 class="page-title">学习空间</h2>
      </div>
      <el-menu mode="horizontal" class="deep-color a-link-item" :default-active="activeItem">
        <el-menu-item :index="$rp.EXPLORE">
          <router-link :to="`/${$rp.SPACES}/${$rp.EXPLORE}`">所有空间</router-link>
        </el-menu-item>
        <sign-in-tooltip>
          <el-menu-item :index="$rp.COLLECTED">
            <router-link :to="`/${$rp.SPACES}/${$rp.COLLECTED}`">关注空间</router-link>
          </el-menu-item>
        </sign-in-tooltip>
        <sign-in-tooltip>
          <el-menu-item :index="$rp.JOINED">
            <router-link :to="`/${$rp.SPACES}/${$rp.JOINED}`">我的空间</router-link>
          </el-menu-item>
        </sign-in-tooltip>
        <SpacesListControls/>
      </el-menu>
      <SpacesList :spaces="spaces" :is-loading="isLoading"/>
      <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
    </div>
  </div>
</template>

<script>
import SpacesList from './SpacesList';
import SpacesListControls from './SpacesListControls';
import * as format from './format';

export default {
  name: 'SpacesIndex', // 空间列表基本
  components: { SpacesList, SpacesListControls },
  data() {
    return {
      spaces: [], // 空间列表数据
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
      isLoading: false, // 正在加载空间列表
    };
  },
  computed: {
    // 从url获取当前查看的空间列表，默认是查看空间
    activeItem() { return this.$route.path.split('/')[2] || 'explore'; },
    // 生成获取空间列表所需参数
    initLoadParams() {
      const sort = this.$route.query.sort || this.$C.sort.spacesSort[0].value;
      return {
        type: this.initLoadType, // 加载那种类型的
        page: this.$route.query.page || 1, // 加载页数
        sort: this.formatSortType(sort.split('_')[0]), // 排序类型（更新、收藏）
        order: sort.split('_')[1], // 排序方式（倒序、正序）
      };
    },
    // url中的加载类型不能直接传给后端，需要转换一下
    initLoadType() {
      switch (this.activeItem) {
        // case this.$rp.RECOMMEND: return 'recommend'; // 加载推荐
        case this.$rp.EXPLORE: return 'all'; // 加载全部
        case this.$rp.COLLECTED: return 'collection'; // 加载收藏的
        case this.$rp.JOINED: return 'current'; // 当前用户加入的空间
        default: return 'all'; // 出错的情况，但是基本不会出错
      }
    },
  },
  methods: {
    // 加载spaces
    loadSpaces() {
      this.isLoading = true;
      this.$api.spaces.index(this.initLoadParams)
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 处理返回数据
    handleRes(res) {
      this.spaces = format.formatSpacesList(res.data);
      this.pagination.currentPage = res.kaminari.current_page;
      this.pagination.pageCount = res.kaminari.total_pages;
    },
    // 切换类型后不改变排序排序，并且移除翻页信息，需要为router-link生成to
    initRouterLinkTo(path) {
      return { path, query: Object.assign(this.$route.query, { page: undefined }) };
    },
    formatSortType(sort) {
      if (sort === 'liked') return 'vote';
      return sort;
    },

  },
  created() {
    this.loadSpaces();
  },
  watch: {
    // 监听加载空间数据，发生改变时重新加载空间列表
    initLoadParams() { this.loadSpaces(); },
  },
};
</script>

<style></style>
